<template>
    <div class="modbus-wrapper">
        <Block>
            <DataGrid :auto-load="autoLoad" ref="dataGridRef">
                <template #toolbar-search>
                    <div class="query-from-box">
                        <el-form>
                            <el-form-item>
                                <el-input v-model="queryData.modelAttrName" placeholder="属性名称" clearable />
                            </el-form-item>
                            <el-form-item>
                                <el-input
                                    v-model="queryData.protocolAttrKey"
                                    placeholder="协议变量定义/名称"
                                    clearable
                                />
                            </el-form-item>
                            <el-form-item>
                                <el-input v-model="queryData.protocolClass" placeholder="属性分类" clearable />
                            </el-form-item>
                        </el-form>
                    </div>
                </template>
                <template #toolbar-operation>
                    <el-button type="primary" @click="onImport">导入</el-button>
                    <el-button type="primary" @click="onExport" plain :loading="exportLoading">导出</el-button>
                </template>
                <el-table-column type="index" label="序号" width="60" align="center" fixed />
                <el-table-column label="模型名称" width="300" fixed show-overflow-tooltip>
                    <template #default="{ row }">
                        <el-button link type="primary" @click="onGopage(row)">
                            {{ row.modelName }}
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="modelAttrName" label="属性名称" show-overflow-tooltip />
                <el-table-column prop="attributeName" label="协议变量定义" show-overflow-tooltip />
                <el-table-column label="协议变量名称" show-overflow-tooltip>
                    <template #default="{ row }">
                        <el-button link type="primary" @click="onViewItem(row)">
                            {{ row.attributeDescription }}
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="slot" label="槽号" show-overflow-tooltip />
                <el-table-column prop="attributeClass" label="属性分类" show-overflow-tooltip />
                <el-table-column label="寄存器起始地址" prop="registerStart" show-overflow-tooltip />
                <el-table-column prop="readNum" label="寄存器个数" show-overflow-tooltip />
                <el-table-column label="数据类型" show-overflow-tooltip>
                    <template #default="{ row }">{{ DataType[row.dataType] }}</template>
                </el-table-column>
            </DataGrid>
        </Block>
    </div>
</template>
<script setup lang="ts">
import { IoTProtocolService } from '@great/services';
import { DataGrid, Block, type DataGridInstance } from '@great/components';
import { showPopupBox } from '@great/utils';
import ImportModal from './ImportModal.vue';
import ViewModal from './ViewModal.vue';
import { DataType } from '@/utils/constant';
import { checkPermi } from '@/utils/ruoyi';
import { useRouter } from 'vue-router';

const router = useRouter();
const protocolDetail = inject<any>('protocolDetail').value;
// 查询条件
const queryData = ref({
    protocolNo: protocolDetail.protocolPublic.protocolNo,
    modelAttrName: '',
    protocolAttrKey: '',
    protocolClass: ''
});
const dataGridRef = useTemplateRef<DataGridInstance>('dataGridRef');
const autoLoad = reactive({
    debounce: true,
    reloadDeps: [queryData],
    onLoad: async (current, size) => {
        const res = await IoTProtocolService.getModbusPage({
            current,
            size,
            ...queryData.value
        });
        return { data: res.data.records, total: res.data.total };
    }
});
const exportLoading = ref(false);
const onGopage = row => {
    if (checkPermi(['model:thing:detail'])) {
        router.push({
            name: 'model-thing-detail',
            params: {
                id: row?.modelId
            }
        });
    }
};
// 查看详情
const onViewItem = (row: { id: string }) => {
    showPopupBox(ViewModal, {
        row: row
    });
};
// 导入
const onImport = () => {
    showPopupBox(ImportModal, {
        protocolNo: protocolDetail.protocolPublic.protocolNo,
        callBack: dataGridRef.value?.refresh
    });
};

const onExport = async () => {
    exportLoading.value = true;
    await IoTProtocolService.exportProtocolContent(protocolDetail.protocolPublic.protocolNo);
    exportLoading.value = false;
};
</script>

<style scoped lang="scss">
.modbus-wrapper {
    .query-from-box {
        display: flex;
        align-items: center;
        .el-form {
            display: flex;
            .el-form-item {
                margin-bottom: 0;
                width: 192px;
            }
            .el-form-item + .el-form-item {
                margin-left: 10px;
            }
        }
    }
}
</style>
